<template>
  <div class="baseContainer">
    <div style="margin-bottom:15px">
      <el-button type="primary" @click="addRole">新增</el-button>
    </div>
    <div class="baseBoderShadow bgWhite baseBorderRadius" style="min-height:690px">
      <div style="padding:30px">
        <div style="padding-bottom:20px">
          <el-input v-model.trim="seachName" placeholder="请输入角色名称" clearable style="width:300px" suffix-icon="el-icon-search">
          </el-input>
          <el-button type="warning" @click="seachBtn">搜索</el-button>
        </div>
        <table class="special_table" width="100%">
          <thead>
            <tr>
              <td>角色名称</td>
              <td>启用/禁用</td>
              <!-- <td>授权</td>
                <td>查看人员</td> -->
              <td>菜单授权</td>
              <td>按钮授权</td>
              <!--              <td>数据授权</td>
-->
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            <template v-if="tableData.length">
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.roleName||'-' }}</td>
                <td style="width:120px" class="switchBox">
                  <div class="special_switch_wrap">
                    <el-switch :width="60" v-model="item.switchValue" active-text="启用" inactive-text="禁用" active-color="#13ce66" inactive-color="#b8bec9" @change="changeSwichBtn(item)">
                    </el-switch>
                  </div>
                </td>
                <td>
                  <el-button size="mini" round type="warning" @click="findAllPermission(item.id)">菜单授权</el-button>
                </td>
                <td>
                  <el-button size="mini" round type="warning" @click="btnPermissionFunc(item)">按钮授权</el-button>
                </td>
                <!--<td>
                  <el-button
                    size="mini"
                    round
                    type="warning"
                    @click="dataPermissionFunc(item)"
                  >数据授权</el-button>
                </td>-->
                <td>
                  <!-- <el-button
                    size="mini"
                    round
                    type="warning"
                    @click="findAllPermission(item.id)"
                  >菜单授权</el-button> -->
                  <el-button class="btnBlue" size="mini" round type="primary" @click="userByRole(item)">查看用户</el-button>
                  <el-button class="btnDelete" size="mini" round type="primary" @click="deleteRole(item.id)">删除</el-button>
                </td>
              </tr>
            </template>
            <template v-else>
              <tr>
                <td colspan="4">暂无数据</td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div style="margin-top: 25px;text-align: center;">
        <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 新增角色 -->
    <el-dialog :visible.sync="dialogVisible" title="新增角色" width="500px">
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model.trim="form.name" />
          </el-form-item>
          <el-form-item label="是否可用" prop="userCode">
            <el-switch v-model="form.isAvailability" />
          </el-form-item>
        </el-form>
        <div style="padding-left:78px">
          <el-button type="primary" @click="submitForm('form')">确定</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 角色授权 -->
    <el-dialog :visible.sync="dialogVisible_sq" title="资源授权" width="500px">
      <span>业务系统</span>
      <el-select v-model="appKey" size="mini" style="width: 140px;" @change="appKeyChangeFunc">
        <el-option v-for="(item, index) in appKeyList" :key="index" :value="item.value" :label="item.title"></el-option>
      </el-select>
      <div class="treeBox scroBox">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-tree ref="tree_data" :data="tree_data" :props="defaultProps" show-checkbox node-key="id" :default-checked-keys="checkedKeys">
          </el-tree>
        </el-scrollbar>
      </div>
      <div style="padding-left:60px">
        <el-button type="primary" @click="assign">确定</el-button>
        <el-button @click="dialogVisible_sq=false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 按钮权限授权 -->
    <el-dialog :visible.sync="dialogVisible_data" :title="`${sysFlag === 2 ? '数据' : sysFlag === 1 ? '按钮' : ''}权限`" width="800px">
      <div>
        <div class="set_data_wrap">
          <div class="data_wrap_left">
            <div class="wrap_left_content scroBox">
              <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-tree ref="tree_data_set_data" :data="permission_tree" :props="defaultProps" :default-expanded-keys="permission_tree_default_expanded" :default-checked-keys="permission_tree_default_checked" node-key="id" @node-click="nodeClick">
                </el-tree>
              </el-scrollbar>
            </div>
          </div>
          <div class="data_wrap_right">
            <div class="wrap_right_content scroBox">
              <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedList" @change="handleCheckFunc">
                  <el-checkbox v-for="item in dataList" :label="item.id" :key="item.id">{{item[ruleName]}}</el-checkbox>
                </el-checkbox-group>
              </el-scrollbar>
              <div class="btn_box" v-if="dataList.length">
                <div class="mark">注意：切换左侧树形菜单前请先保存所勾选规则!</div>
                <el-button type="primary" @click="assignRoleDataRule">保 存</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 数据权限授权 -->
    <el-dialog :visible.sync="dialogVisible_data_sq" title="数据授权" width="500px">
      <div>
        <span>数据范围:</span>
        <el-select v-model="sjsq_value" placeholder="请选择" @change="sjsqChange">
          <el-option v-for="(item, index) in sjsq_options" :key="index" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </div>
      <div class="treeBox scroBox" style="overflow-y: scroll;" v-if="sjsq_value === 0">
        <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
        <el-tree ref="tree_data_sjsq" :data="tree_data_shsq" :props="{
              'children': 'children',
              'label': 'mc'
            }" show-checkbox node-key="id">
        </el-tree>
        <!-- <el-checkbox-group v-model="sjsq_checkList">
          <el-tree
            ref="tree_data"
            :data="tree_data_shsq"
            :props="defaultProps"
            node-key="id"
            :default-expanded-keys="sjsq_expandedKeys"
          >
          <span slot-scope="{ node, data }">
            <el-checkbox :label="`${data.id},${data.cclx}`">&nbsp;</el-checkbox><span>{{data.mc}}</span>
          </span>
          </el-tree> -->
        <!-- </el-checkbox-group> -->
        <!-- </el-scrollbar> -->
      </div>
      <div style="margin-top: 20px;text-align: center;">
        <el-button type="primary" @click="saveSjsqFunc">确定</el-button>
        <el-button @click="dialogVisible_data_sq=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import btnPermissionVue from "../btn-permission.vue";
import { getDictByBzdm } from "@/api/common.js";
export default {
  name: "jsgl",
  data() {
    return {
      dialogVisible_data_sq: false, // 数据授权
      tree_data_shsq: [], // 数据授权
      sjsq_checkList: [],
      sjsq_expandedKeys: [],
      // 数据授权选中的
      sjsq_checked_default: [],

      wrapStyle: [{ height: "100%" }],
      dialogVisible_data: false, // 数据权限
      permission_tree: [],
      permission_tree_default_expanded: [],
      permission_tree_default_checked: [],
      isIndeterminate: false,
      checkAll: false,
      checkedList: [],
      dataList: [],
      currentNode: null,

      seachName: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      dialogVisible: false,
      form: {
        name: "",
        isAvailability: false
      },
      defaultProps: {
        children: "children",
        label: "name"
      },
      tree_data: [],
      dialogVisible_sq: false,
      checkedKeys: [],
      roleId: 0,
      ruleName: "name", // 规则字段名称，，如果是按钮规则，是name，否则是ruleName
      sysFlag: 1, // 规则类型，按钮规则是1 ，数据规则是2
      sjsq_value: 1,
      sjsq_options: [
        { value: 1, label: "教职工所在的单位" },
        { value: 0, label: "自定义教学组织机构" },
        { value: 2, label: "辅导员负责的班级" },
        { value: 3, label: "年级主任负责的年级" }
      ],
      appKey: "", // 所选中的业务系统
      appKeyList: [], // appKey列表，区分不同的业务系统
      rules: {
        name: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    sysFlag(val) {
      switch (val) {
        case 1:
          this.ruleName = "name";
          break;
        case 2:
          this.ruleName = "ruleName";
          break;
      }
    }
  },
  mounted() {
    this.roleList();
    this.getAppKeyList();
  },
  methods: {
    /**
     * @name userByRole
     * @description 角色下用户列表
     * @author wqy
     * @date 2021-01-20 13:59:45
     */
    userByRole(item) {
      this.$router.replace({
        path: `/jsgl`,
        query: {
          flag: 2,
          roleId:item.id,
          roleName:item.roleName
        }
      });
    },
    /**
     * @name getAppKeyList
     * @description 获取appKey
     * @author cjs1992
     * @date 2020-01-03 09:13:02
     */
    async getAppKeyList() {
      const res = await getDictByBzdm({
        bzdm: "XTDM-APP-KEY"
      });
      this.appKeyList = res.data || [];
      try {
        this.appKey = res.data[0].value;
      } catch (error) {
        console.log(error, "没有配置业务系统的标准代码");
      }
      return Promise.resolve();
    },
    /**
     * @name appKeyChangeFunc
     * @description 切换系统
     * @author cjs1992
     * @date 2020-01-19 17:27:37
     */
    async appKeyChangeFunc() {
      this.findAllPermission(this.roleId);
    },
    /**
     * @name handleCheckFunc
     * @description
     * @author cjs1992
     * @date 2019-10-23 14:54:51
     */
    handleCheckFunc(val) {
      let checkedCount = val.length;
      this.checkAll = checkedCount === this.dataList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.dataList.length;
    },
    /**
     * @name handleCheckAllChange
     * @description
     * @author cjs1992
     * @date 2019-10-23 14:55:09
     */
    handleCheckAllChange(val) {
      this.checkedList = val
        ? this.dataList.map(item => {
            return item.id;
          })
        : [];
      this.isIndeterminate = false;
    },
    /**
     * @name nodeClick
     * @description
     * @author cjs1992
     * @date 2019-10-23 14:57:50
     */
    async nodeClick(data, node) {
      this.dataList = [];
      this.checkAll = false;
      this.isIndeterminate = false;
      this.checkedList = false;
      // 保存信息
      if (node.level === 1) {
        // 第一层
        return;
      }
      this.currentNode = data;
      await this.getPermDataRuleListByPermId();
      await this.getPermDataRuleListByPermIdAndUserId();
    },
    /**
     * @name assignRoleDataRule
     * @description 保存权限
     * @author cjs1992
     * @date 2019-10-23 15:22:57
     */
    async assignRoleDataRule() {
      let dataRuleIds = "";
      this.checkedList.map(item => {
        dataRuleIds += `,${item}`;
      });
      dataRuleIds = dataRuleIds.slice(1);
      let url = "qxgl-jsgl/assignButton";
      let obj = {
        roleId: this.roleId,
        menuId: this.currentNode.id,
        permissionIds: dataRuleIds,
        //处理bug增加key
        appKey: window.$appKey
      };
      if (this.sysFlag === 2) {
        // 数据权限
        url = "qxgl-menu/assignRoleDataRule";
        obj = {
          permissionId: this.currentNode.id,
          dataRuleIds
        };
      }
      const res = await this.$store.dispatch(url, {
        ...obj
      });
      this.$message({
        type: "success",
        message: "保存成功!"
      });
    },
    /**
     * @name getPermDataRuleListByPermId
     * @description 获取数据规则列表
     * @author cjs1992
     * @date 2019-10-23 15:00:00
     */
    async getPermDataRuleListByPermId() {
      let url = "getPermissionButton";
      let obj = {
        id: this.currentNode.id
      };
      if (this.sysFlag === 2) {
        // 数据权限
        url = "getPermDataRuleListByPermId";
        obj = {
          permissionId: this.currentNode.id
        };
      }
      const res = await this.$store.dispatch(`qxgl-menu/${url}`, {
        ...obj
      });
      this.dataList = res.data || [];
      return Promise.resolve();
    },
    /**
     * @name getPermDataRuleListByPermIdAndUserId
     * @description 回显数据权限数据
     * @author cjs1992
     * @date 2019-10-23 15:08:17
     */
    async getPermDataRuleListByPermIdAndUserId() {
      this.checkedList = [];
      let url = "getRolePermissionButton";
      let obj = {
        id: this.currentNode.id,
        roleId: this.roleId
      };
      if (this.sysFlag === 2) {
        // 数据权限
        url = "getPermDataRuleListByPermIdAndUserId";
        obj = {
          permissionId: this.currentNode.id
        };
      }
      const res = await this.$store.dispatch(`qxgl-menu/${url}`, {
        ...obj
      });
      let list = res.data || [];
      if (this.sysFlag === 1) {
        // 按钮权限，去除为选中的
        list = list.filter(item => {
          return item.isCheck === 1;
        });
      }
      list.map(item => {
        this.checkedList = [...this.checkedList, item.id];
      });
      this.isIndeterminate = true;
      this.checkAll = false;
      if (this.checkedList.length === 0) {
        this.isIndeterminate = false;
        return;
      }
      if (this.checkedList.length === this.dataList.length) {
        this.isIndeterminate = false;
        this.checkAll = true;
      }
    },
    /**
     * @name setDataPermission
     * @description 数据权限
     * @author cjs1992
     * @date 2019-10-23 13:59:43
     */
    async setDataPermission(data) {
      this.roleId = data.id;
      this.dialogVisible_data = true;
      const res = await this.$store.dispatch("qxgl-jsgl/findAllPermission", {
        id: data.id,
          type:2,
        appKey: window.$appKey
      });
      let menuList = res.data;
      //this.processData(menuList);
      this.permission_tree = menuList;
      this.permission_tree_default_expanded = this.permission_tree_default_checked = [
        menuList[0].id
      ];
      this.$nextTick(async () => {
        let _ref = this.$refs.tree_data_set_data;
        _ref.setCurrentKey(menuList[0].children[0].id);
        this.currentNode = _ref.getCurrentNode();
        await this.getPermDataRuleListByPermId();
        await this.getPermDataRuleListByPermIdAndUserId();
      });
    },
    /**
     * @name processData
     * @description 处理查询到的数据
     * @author cjs1992
     * @date 2019-10-23 14:10:56
     */
    processData(list) {
      for (let i = list.length - 1; i > -1; i--) {
        let item = list[i];
        if (!item.ischeck) {
          // 删除这一项
          list.splice(i, 1);
        } else {
          this.processData(item.children || []);
        }
      }
    },
    /**
     * @name btnPermissionFunc
     * @description 按钮授权
     * @author cjs1992
     * @date 2019-12-03 09:25:27
     */
    async btnPermissionFunc(data) {
      this.setDataPermission(data);
    },
    /**
     * @name dataPermissionFunc
     * @description 数据授权
     * @author cjs1992
     * @date 2019-12-04 11:30:15
     */
    async dataPermissionFunc(data) {
      this.roleId = data.id;
      this.sjsq_checkList = [];
      this.sjsq_expandedKeys = [];
      this.sjsq_value = data.dataType || 0;
      this.dialogVisible_data_sq = true;
      this.queryRoleDateTree();
    },
    /**
     * @name sjsqChange
     * @description 切换数据授权
     * @author cjs1992
     * @date 2020-05-07 10:31:43
     */
    sjsqChange(val) {
      if (this.sjsq_value === 0) {
        this.$nextTick(() => {
          this.$refs.tree_data_sjsq.setCheckedKeys(this.sjsq_checked_default);
        });
      }
    },
    /**
     * @name queryRoleDateTree
     * @description 获取机构树
     * @author cjs1992
     * @date 2019-12-04 11:33:32
     */
    async queryRoleDateTree() {
      const res = await this.$store.dispatch("qxgl-jsgl/queryRoleDateTree", {
        roleId: this.roleId
      });
      let arr = [res.data];
      let list = [];
      this.dealRoleData(arr, list);
      this.ope_tree_data_sjsq(arr, []);
      this.tree_data_shsq = arr;
      this.sjsq_checked_default = list;
      // this.sjsq_checkList = list;
      if (this.sjsq_value === 0) {
        this.$refs.tree_data_sjsq.setCheckedKeys(list);
      }
      arr = null;
      list = null;
    },
    /**
     * @name ope_tree_data_sjsq
     * @description 操作数据授权数据
     * @author cjs1992
     * @date 2019-12-17 16:38:57
     */
    ope_tree_data_sjsq(list, arr) {
      for (let item of list) {
        item.fjdIdList = [...arr];
        if (item.children && item.children.length) {
          this.ope_tree_data_sjsq(item.children, [...arr, item.id]);
        }
      }
    },
    /**
     * @name dealRoleData
     * @description 处理数据权限数据
     * @author cjs1992
     * @date 2019-12-04 13:12:49
     */
    dealRoleData(list, arr) {
      for (let item of list) {
        // item.label_name = `${item.id},${item.cclx}`;
        // this.sjsq_expandedKeys.push(String(item.id));
        // console.log(item.label_name);
        if (item.checked) {
          // arr.push(`${item.id},${item.cclx}`);
          arr.push(item.id);
        }
        if (item.children && item.children.length) {
          this.dealRoleData(item.children, arr);
        }
      }
    },
    /**
     * @name saveSjsqFunc
     * @description 确定
     * @author cjs1992
     * @date 2019-12-04 13:20:55
     */
    async saveSjsqFunc() {
      // let jxzzjgList = this.sjsq_checkList.map((item) => {
      //   const arr = item.split(',');
      //   return {
      //     cclx: arr[1],
      //     id: arr[0]
      //   };
      // });
      // console.log(
      //   this.$refs.tree_data_sjsq.getCheckedNodes(true, false)
      // );
      // return;
      let jxzzjgList = [];
      if (this.sjsq_value === 0) {
        let treeList_leaf = this.$refs.tree_data_sjsq.getCheckedNodes(
          false,
          false
        );
        let treeList = this.$refs.tree_data_sjsq.getCheckedNodes(true, false);
        // 先将treeList_leaf中存在的treeList项过滤掉，
        treeList_leaf = treeList_leaf.filter(
          item => treeList.findIndex(vo => vo.id === item.id) === -1
        );
        // 然后过滤掉treeList中fjdId是treeList_leaf中项id的项
        treeList = treeList.filter(
          item => treeList_leaf.findIndex(vo => vo.id === item.fjdId) === -1
        );
        // 之后treeList_leaf中自查
        treeList_leaf = treeList_leaf.filter(
          item => treeList_leaf.findIndex(vo => vo.id === item.fjdId) === -1
        );
        // console.log(treeList_leaf, treeList)
        // 合并treeList_leaf和treeList
        jxzzjgList = [...treeList_leaf, ...treeList].map(item => {
          return {
            cclx: item.cclx,
            id: item.id
          };
        });
      }
      // return
      const res = await this.$store.dispatch("qxgl-jsgl/saveSysRoleMenu", {
        jxzzjgList,
        jsId: this.roleId,
        dataType: this.sjsq_value
      });
      this.$message({
        type: "success",
        message: "数据授权成功!"
      });
      this.dialogVisible_data_sq = false;
      jxzzjgList = null;
      this.handleCurrentChange(1);
    },
    /**
     * @name findZsList
     * @description 宿舍查询-搜索
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async roleList() {
      const data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        roleName: this.seachName // 入学年级ID
      };
      const res = await this.$store.dispatch("qxgl-jsgl/findList", data);
      console.log(res.data.list);
      res.data.list.map(item => {
        item.status == 1
          ? (item.switchValue = true)
          : (item.switchValue = false);
      });
      this.tableData = res.data.list;
      this.totalPage = res.data.total;
    },
    /**
     * @name  handleCurrentChange handleSizeChange
     * @description 分页
     * @author wqy
     * @date 2019-09-16 15:45:04
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.roleList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.roleList();
    },
    /**
     * @name seachBtn
     * @description 输入关键字查询
     * @author wqy
     * @date 2019-09-16 15:20:17
     */
    seachBtn() {
      this.currentPage = 1;
      this.roleList();
    },
    changeSwichBtn(item) {
      if (item.status == 1) {
        this.disableGetBtn(item.id);
      } else {
        this.enablegetBtn(item.id);
      }
    },
    /**
     * @name enablegetBtn
     * @description 启用
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async enablegetBtn(id) {
      const res = await this.$store.dispatch("qxgl-jsgl/enableGet", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "启用成功!",
          type: "success"
        });
        this.roleList();
      }
    },
    /**
     * @name disableGetBtn
     * @description 禁用
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async disableGetBtn(id) {
      const res = await this.$store.dispatch("qxgl-jsgl/disableGet", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "禁用成功!",
          type: "success"
        });
        this.currentPage = 1;
        this.roleList();
      }
    },
    addRole() {
      this.form = {
        name: "",
        isAvailability: false
      };
      this.dialogVisible = true;
    },
    /**
     * @name submit
     * @description 添加角色
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async submit() {
      const status = this.form.isAvailability ? 1 : 0;
      const res = await this.$store.dispatch("qxgl-jsgl/add", {
        roleName: this.form.name,
        status: status
      });
      if (res.status == 1000) {
        this.$message({
          message: "添加成功!",
          type: "success"
        });
        this.dialogVisible = false;
        this.currentPage = 1;
        this.roleList();
      }
    },
    /**
     * @name deleteRole
     * @description 删除角色
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async deleteRole(id) {
      try {
        await this.confirmFunc({
          msg: "您确定要删除角色吗?"
        });
        const res = await this.$store.dispatch("qxgl-jsgl/deleteRole", {
          id: id
        });
        if (res.status == 1000) {
          this.$message({
            message: "删除成功!",
            type: "success"
          });
          this.currentPage = 1;
          this.roleList();
        }
      } catch (err) {
        // console.log(err);
      }
    },
    /**
     * @name findAllPermission
     * @description 角色权限列表
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async findAllPermission(id) {
      this.roleId = id;
      const res = await this.$store.dispatch("qxgl-jsgl/findAllPermission", {
        id: id,
        appKey: this.appKey
      });
      if (res.status == 1000) {
        this.checkedKeys = [];
        this.setChildrenCheck(res.data);
        this.dialogVisible_sq = true;
        this.tree_data = res.data;
      }
    },
    setChildrenCheck(list) {
      for (let len = list.length, i = 0; i < len; i++) {
        let item = list[i];
        if (item.ischeck) {
          this.$nextTick(() => {
            this.$refs.tree_data.setChecked(item.id, true, false);
          });
        }
        if (item.children.length > 0) {
          this.setChildrenCheck(item.children);
        }
      }
    },
    /**
     * @name deleteRole
     * @description 角色设置权限-确认按钮
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async assign() {
      this.checkedKeys = [];
      this.checkedKeys = this.$refs.tree_data.getCheckedNodes(false, true);
      let stringCheck = "";
      for (let item of this.checkedKeys) {
        stringCheck += item.id + ",";
      }
      let reg = /,$/gi;
      stringCheck = stringCheck.replace(reg, "");
      const res = await this.$store.dispatch("qxgl-jsgl/assign", {
        id: this.roleId,
        permissionIds: stringCheck,
        appKey: this.appKey
      });
      if (res.status == 1000) {
        this.$message({
          message: "设置资源成功!",
          type: "success"
        });
        this.dialogVisible_sq = false;
      }
    }
  }
};
</script>
<style  scoped lang="scss">
@import "@/views/jcsz/common-switch.scss";
// .el-switch {
//   width: 135px;
// }
.set_data_wrap {
  display: table;
  width: 100%;
  .data_wrap_left {
    display: table-cell;
    vertical-align: top;
    width: 260px;
    .wrap_left_content {
      height: 500px;
      padding: 16px;
      // overflow: hidden;
      border: 1px solid #e0e0e0;
    }
    /deep/ .el-tree-node.is-current {
      & > .el-tree-node__content {
        background: #3ac19d !important;
        color: #fff !important;
      }
      &:focus > .el-tree-node__content {
        background: #3ac19d;
      }
    }
  }
  .data_wrap_right {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
    .wrap_right_content {
      height: 500px;
      border: 1px solid #e0e0e0;
      padding: 16px;
      position: relative;
      padding-bottom: 60px;
      .btn_box {
        text-align: center;
        bottom: 10px;
        left: 0;
        width: 100%;
        position: absolute;
        .mark {
          color: #ffba00;
        }
      }
    }
  }
}
h5,
p,
ul,
img {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  *zoom: 1;
}

.clearfix:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}

li {
  list-style-type: none;
}
.qxgl {
  padding: 15px;
}
.zsHistory .iconfont {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.blue {
  color: #6bc5ff;
  cursor: pointer;
}
.greey {
  color: #aaafb3;
}
.greey:hover {
  color: #eb9616;
}
.addBtn {
  display: inline-block;
  margin-right: 20px;
  color: #409eff;
  background: #ecf5ff;
  border: 1px solid;
  border-color: #b3d8ff;
  padding: 6px 15px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.addBtn:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
.treeBox {
  height: 300px;
  padding-left: 40px;
  /* overflow-y: scroll; */
}
</style>
